<template>
	<view class="OptionsCard">
		<view class="optionItem" v-for="(option, index) in filteredOptionsList" :key="index">
			<view class="optionItem-left" v-if="option.page" @click="goToPage(option.page)">
				<image :src="imageUrl + option.icon" mode=""></image>
				<text>{{ option.title }}</text>
			</view>
			<view class="optionItem-left" v-else-if="option.title === '在线客服'" @click="ContactPopup">
				<image :src="imageUrl + option.icon" mode=""></image>
				<text>{{option.title}}</text>
			</view>
			<image src="@/static/myself/lefticon.png" mode=""></image>
			
		</view>
	</view>
	<ButtomPuopoVue ref="openPopup"></ButtomPuopoVue>
</template>

<script setup>
	import {ref,computed} from 'vue';
	import { imageUrl } from '@/config/request/request';
	import ButtomPuopoVue from './ButtomPuopo.vue'
	const openPopup = ref();
	const userPermissions = ref(uni.getStorageSync('userInfo').identify);
	// 原始 OptionsList
	const OptionsList = ref([
		// { title: '图库收藏', icon: '/applet/static/1736425712.png', page: '/myselfSubpages/MyCollection/MyCollection' },
		{ title: '我的点赞', icon: '/applet/static/1736425798.png', page: '/myselfSubpages/myLike/myLike' },
		{ title: '优惠卷', 	icon: '/applet/static/1736425828.png', page: '/myselfSubpages/coupon/coupon' },
		{ title: '我的图库', icon: '/applet/static/1737126895174547400.png', page: '/myselfSubpages/MyCommunity/MyCommunity' },
		{ title: '在线客服', icon: '/applet/static/1736425863.png', page: '' },
		{ title: '收货地址', icon: '/applet/static/1736425875.png', page: '/myselfSubpages/MyAddress/MyAddress' },
		{ title: '关于我们', icon: '/applet/static/1736425886.png', page: '/myselfSubpages/AboutUs/AboutUs' },
	]);
	
	// 根据 userPermissions 过滤 OptionsList
	const filteredOptionsList = computed(() => {
		return OptionsList.value.filter(option => {
			if (option.title === '我的图库' && (userPermissions.value !== 3 && userPermissions.value !== 4)) {
				return false;
			}
			return true;
		});
	});

	// 页面跳转
	const goToPage = (page) => {
		if (page) {
			uni.navigateTo({
				url: page,
			});
		}
	};
	// 在线客服
	const ContactPopup = () => {
		if (openPopup.value) {
			openPopup.value.showPopup();
			console.log('在线客服弹窗');
		}
	};
</script>



<style lang="scss" scoped>
	.OptionsCard {
		width: 95%;
		min-height: 240rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;

		.optionItem {
			display: flex;
			width: 100%;
			height: 100rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eee;

			image {
				width: 14rpx;
				height: 26rpx;
			}

			.optionItem-left {
				display: flex;
				height: 100%;
				width: 100%;
				align-items: center;
				gap: 15rpx;

				image {
					width: 38rpx;
					height: 38rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(68, 71, 54, 1);
				}
			}

			>button {
				width: 100%;
				height: 100%;
				background-color: transparent;
				padding: 0;

				&::after {
					border: none;
				}
			}

		}
	}
</style>